<template>
  <div class="detail">
<!--    <div class="goBack">-->
<!--      <img src="../../../static/images/detail/icon_return.png" alt="" @click="goToArticle">-->
<!--    </div>-->
    <div class="news">
      <div class="title">建党百年 | 外运物流开展党史学习教育</div>
      <div class="date">2021年8月12日 10:10</div>
      <div class="content">
        <img src="../../../static/images/detail/redpic.png" alt="">
        <span>7月9至10日，外运物流党委组织党员领导干部赴赣州、古田开展“红色教育基地行”党史学习教育，追寻红色足迹，缅怀革命英烈，赓续基因血脉，汲取前进力量。外运物流领导班子总部职能部门总经理助理级以上人员参加活动。</span>
        <img src="../../../static/images/detail/redpic2.png" alt="">
        <span>7月9日，在赣州市于都县，大家肃穆站立在中央红军长征出发纪念碑前，向纪念碑三鞠躬、敬献花篮，缅怀革命先烈的英雄事迹，表达无限敬仰和深切怀念之情。</span>
        <div class="describe"></div>
      </div>
    </div>
    <div class="comments">评论展示区</div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      newsId:""
    }
  },
  beforeMount() {
    //从路由对象中获取newsId
    this.newsId=this.$route.params.newsId
  },
  methods:{
    goToArticle(){
      this.$router.push('/article')
    }
  },
  computed:{
    id(){
       return this.$route.params.id //从params中拿参数,即从url部分拿参数
      //return this.$route.query.id //从query中拿参数,即从get中拿参数
    }
  },
}
</script>

<style lang="less" scoped>
.detail{
  margin: 0 10px;
  //background-color: lightblue;
  .goBack{
    width: 355px;
    height: 40px;
   // background-color: lavenderblush;
    display: flex;
    //justify-content: center;//块元素x方向居中对齐
    align-items: center;//块元素x方向左对齐,上下居中
    img{
      width: 28px;
      height: 28px;
      border: 1px gray dashed;
    }
  }
  .news{
    width: 355px;
    height: 200px;
   // background-color: lavender;
    .title{
      height: 55px;
      //background-color: lightskyblue;
      line-height: 30px;
      font-size: 23px;
      font-weight: 650;
    }
    .date{
      height: 45px;
      line-height: 45px;
      //background-color: lemonchiffon;
      font-size: 16px;
      font-weight: 500;
      color: gray;
    }
    .content{
      height: 90px;
      //background-color: lightgoldenrodyellow;
      img{
        height: 200px;
        width: 355px;
      }
      span{
        font-size: 17px;
        font-weight: 500;
        color: gray;
      }
      .describe{
        width: 355px;
        height: 50px;
       // background-color: lavenderblush;
      }
    }
  }
  .comments{
    width: 355px;
    height: 200px;
    //background-color:lavenderblush;
  }
}
</style>
